<template>
	<TableEdit ref='editRef' :config='tableEditConfig' />
	<Button label='获取数据' @click='onClick' class='mt20'/>
</template>

<script setup>
	/* ---------------------------  Component --------------------------- */
	const TableEdit 	= $.lazy(()=>import('#cpt/table/table-edit.vue'))
	const Button 		= $.lazy(()=>import('@antd/button.vue'))
	/* ---------------------------  数据格式 --------------------------- */
	const list = [
		{ label:'vue', value:'1' },
		{ label:'react', value:'2' },
		{ label:'js', value:'3' },
		{ label:'html', value:'4' },
		{ label:'java', value:'5' },
		{ label:'nodejs', value:'6' },
	]
	
	// 默认数据
	const data = [
		// { name:'Vue', con:'1', num: 10, mark:'备注' }
	]
	
	const tableEditConfig = {
		title : '编辑表格',
		data,				// 默认数据
		structure: { name:null, con:'2',  num:0,  mark: null },		// 数据结构, 可设默认值
		cols: [	
			{ title: '名称', 	dataIndex: 'name', disabled:true },
			{ title: '类型', 	dataIndex: 'con', slots: { customRender: 'con' }, type:'select', data:list, idStr:'value', nameStr:'label', change: ({ value, row }) => {
				console.log(row)
			} },
			{ title: '数量', 	dataIndex: 'num',	slots: { customRender: 'num' }, mode:'number', disabled:()=>true },
			{ title: '备注', 	dataIndex: 'mark', 	slots: { customRender: 'mark' }  },
			{ title: '日期', 	dataIndex: 'date', 	slots: { customRender: 'date' }, type:'date' },
		]
	}
	/* ---------------------------  Test --------------------------- */
	let editRef = $ref()
	const onClick = () => {
		const data = editRef.data(  )
		console.log(data)
	}
</script>